<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>4. Viewer</title>
    <!-- Viewer -->
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-viewer.min.css" />
  </head>
  <body>
    <div>
      <!-- 左侧目录树 -->
       <div id="tui-doc-tree">
        <div id="tui-doc-tree-wrapper">
          <div id="tui-doc-tree-header">文档发布使用</div>
          <div id="tui-doc-tree-content">
            <ul id="tui-doc-tree-list">
              <li class="tui-doc-tree-item">
                <a href="./index.html">4. Viewer</a>
                <ul class="tui-doc-tree-sub-list">
                  <li class="tui-doc-tree-item">
                    <a href="./editor.html">1. Editor</a>
                  </li>
                  <li class="tui-doc-tree-item">
                    <a href="./viewer.html">2. Viewer</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
       </div>
       <div id="viewer">
        <div class="tui-doc-description">
          <strong
            >The example code can be slower than your environment because the code is transpiled by
            babel-standalone in runtime.</strong
          >
          <br />
          You can see the tutorial
          <a
          href="https://github.com/nhn/tui.editor/blob/master/docs/en/viewer.md"
          rel="noopener noreferrer" target="_blank"
          >here</a>.
        </div>
      </div>
      <div class="sidebar">
        <ol>
        </ol>
      </div>
    </div>
    
    <!-- Added to check demo page in Internet Explorer -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <!-- Viewer -->
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>

    <script type="text/babel" class="code-js">
      // fetch获取文件内容
      fetch('/api/fileContent?filePath=D:/data1/nextcloud/项目/内部项目/统一认证平台/研发/统一登录.md')
        .then(res => res.json())
        .then(text => {
          const viewer = toastui.Editor.factory({
            el: document.querySelector('#viewer'),
            viewer: true,
            initialValue: text.content
          });
          // 查找#viewer标签下内容中的http或https地址，自动添加target="_blank"
          document.querySelectorAll('#viewer a').forEach(a => {
            const href = a.getAttribute('href');
            if (href.startsWith('http') || href.startsWith('https')) {
              a.setAttribute('target', '_blank');
            }
          });
          // 查找h1到h7的标题构造为目录，放入sidebar内，点击目录跳转至对应位置。已知原标题没有id
          const hs = document.querySelectorAll('#viewer h1, #viewer h2, #viewer h3, #viewer h4, #viewer h5, #viewer h6');
          const sidebar = document.querySelector('.sidebar');
          let i=0;
          hs.forEach(h => {
            // 标题原位置要加上id
            const id = "title-" + i++;
            h.id = id;
            // 从h1到h7应该有层级，最外层也在ol内
            const li = document.createElement('li');
            const a = document.createElement('a');
            a.href = '#' + id;
            a.textContent = h.textContent;
            li.appendChild(a);
            sidebar.appendChild(li);
          });
          
          document.querySelectorAll('#viewer img').forEach(img => {
            img.style.maxWidth = '100%';
          })
          document.querySelectorAll('#viewer pre').forEach(pre => {
            pre.style.overflow = 'auto';
          })
          document.querySelectorAll('#viewer code').forEach(code => {
            code.style.backgroundColor = '#f5f5f5';
          })
        });

    </script>
  </body>
  <style type="text/css">
    #tui-doc-tree {
      width: 250px;
      float: left;
      overflow: hidden;
      border-right: 1px solid #ccc;
      background-color: #fafafa;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
    }
    #viewer {
      width: 70%;
      float: left;
      padding: 20px;
      margin-left: 250px;
      height: 100%;
    }

    .ProseMirror {
      font-family: "Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;
      font-size: 15px;
      line-height: 25.6px;
     }
     .toastui-editor-contents {
       font-family: "Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;
       font-size: 15px;
       line-height: 25.6px;
    }
    .sidebar {
      position: fixed;
      right: 0;
      top: 0;
      width: 200px;
      height: 100%;
      background-color: #f5f5f5;
      border-right: 1px solid #e5e5e5;
      padding: 20px;
    }
    .content {
      margin-left: 200px;
      /* padding: 20px; */
    }
    .toastui-editor-contents h3 {
      margin: 25px 0;
    }
    .toastui-editor-defaultUI {
      border: 0;
      border-left: 1px solid #dadde6;
    }
    .toastui-editor-defaultUI-toolbar {
      background-color: #fff;
    }
    </style>
</html>